<template>
  <a-modal title="选择接单组织" title-align="start" @ok="handleOk" @before-open="getList" :mask-closable="false" v-model:visible="showvisible" @cancel="showvisible = false" :width="600">
    <a-radio-group v-model="selId">
      <a-scrollbar style="width: 100%; overflow: auto">
        <div class="item-con">
          <div class="item-com" v-for="(item, index) of comList" :key="index">
            <a-space>
              <span class="icon icon-shouye highlight"></span>
              <span>{{ item.companyShortName }}</span>
              <a-radio class="radio" :value="item.companyId"></a-radio>
            </a-space>
            <div class="fs12">
              <span class="label db common-text">可接单数：</span>
              <span class="text db">{{ item.canTakeNum }}</span>
            </div>
            <div class="fs12">
              <span class="label db common-text">待排期单数：</span>
              <span class="text db">{{ item.waitScheduleNum }}</span>
            </div>
            <div class="fs12">
              <span class="label db common-text">执行中单数：</span>
              <span class="text db">{{ item.executingTakeNum }}</span>
            </div>
            <div style="margin-top: 10px">送样地址</div>
            <div class="fs12">{{ $extract(item, 'sampleAddress.userName') }} （{{ $extract(item, 'sampleAddress.phone') }}）</div>
            <div class="fs12"> {{ $extract(item, 'sampleAddress.stateOrRegion') }} {{ $extract(item, 'sampleAddress.city') }} </div>
            <div class="fs12">{{ $extract(item, 'sampleAddress.address') }}</div>
          </div>
        </div>
      </a-scrollbar>
    </a-radio-group>
    <template #footer>
      <a-button class="gray-outline" @click="showvisible = false">取消</a-button>
      <a-button class="ml10" type="primary" @click="handleOk">确认</a-button>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref, computed, onMounted } from 'vue'
  import { listTakeCompanysByTaskType } from '@/api/task'
  import { Message } from '@arco-design/web-vue'
  import userStore from '@/store/modules/user'
  let props = defineProps(['modelValue', 'type'])
  let emits = defineEmits(['save', 'update:modelValue'])
  let showvisible = computed({
    get() {
      return props.modelValue
    },
    set(val) {
      emits('update:modelValue', val)
    },
  })

  let selId = ref('')
  let comList: any = ref([])
  let userInfo = userStore()
  const getList = async () => {
    const res: any = await listTakeCompanysByTaskType({ taskType: props.type, companyId: userInfo.companyId })
    let arr = res?.data || []
    comList.value = arr.filter((e: any) => e.canTakeNum > 0)
  }

  const handleOk = () => {
    if (!selId.value) return Message.error('请选择接单组织')
    let item = comList.value.find((item: any) => item.companyId === selId.value)
    emits('save', item)
    showvisible.value = false
  }

  onMounted(() => {
    getList()
  })
</script>

<style lang="less" scoped>
  .fs12 {
    font-size: 12px;
    line-height: 22px;
  }
  .db {
    display: inline-block;
  }

  .common-text {
    font-size: 12px;
    color: #a39999;
  }

  .item-con {
    // width: 100%;
    // height: 200px;
    display: flex;
    .item-com {
      position: relative;
      width: 200px;
      height: 230px;
      border: 1px solid #d7d7d7;
      padding: 5px 8px;
      margin-right: 10px;
    }

    :deep(.arco-radio) {
      margin-right: 0 !important;
    }
  }

  .radio {
    position: absolute;
    top: 5px;
    right: 5px;
  }
</style>
